<template>
    <section>
        <el-card style="margin-bottom: 20px;background-color: #FAFAFA;">
            <div>详情</div>
            <hr>
            <div style="margin-bottom: 5px">名称：{{PersistentVolumeDetail.persistentVolume.name}}</div>




            <div style="margin-bottom: 5px">创建时间：{{PersistentVolumeDetail.persistentVolume.createdate}}</div>
            <div style="margin-bottom: 5px">状态：{{PersistentVolumeDetail.persistentVolume.status}}</div>
            <div style="margin-bottom: 5px">索取：{{PersistentVolumeDetail.persistentVolume.claim}}</div>
            <div style="margin-bottom: 5px">回收策略：{{PersistentVolumeDetail.persistentVolume.strategy}}</div>
            <div style="margin-bottom: 5px">访问模式：
                    <el-tag size="mini" v-for="mode in PersistentVolumeDetail.persistentVolume.accessmodes">{{mode}}</el-tag>
            </div>
            <div style="margin-bottom: 5px">总量：{{PersistentVolumeDetail.persistentVolume.capacity.storage}}</div>
            <div style="margin-bottom: 5px">消息：{{PersistentVolumeDetail.persistentVolume.message}}</div>





        </el-card>

        <el-card style="margin-bottom: 20px;background-color: #FAFAFA;">
            <div>持久化存储卷来源</div>
            <hr>
            <div v-for="(v,key) in PersistentVolumeDetail.persistentVolume.source " style="margin-bottom: 5px">
                <div style="font-weight: 600">{{key}}:&nbsp;&nbsp;</div>
                <div v-for="(vv,kk) in v">
                    <span>{{kk}}:  </span> <span>{{vv}}</span>
                </div>

            </div>


        </el-card>


    </section>
</template>

<script>
    import { k8sPersistentVolumeDetailData } from '../../api/api'
    export default {
        data() {
            return {
                PersistentVolumeDetail: {
                    persistentVolume:{},

                },
            }
        },
        methods: {

            getK8sPersistentVolumeDetailData(){
                let self = this
                let param = {name:this.$route.params.name}
                k8sPersistentVolumeDetailData(param).then((res) => {
                    console.log(res)
                    self.PersistentVolumeDetail.persistentVolume = res.persistentVolume




                })

            },
            rowStyle({ row, rowIndex}){
                return "height:40px;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;"
            },

        },
        mounted: function () {
            console.log(this.$route.params.name)
            this.getK8sPersistentVolumeDetailData()
        }
    }
</script>
